<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><router-link to="/customer/customerVisit">客户拜访记录管理</router-link></el-breadcrumb-item>
        <el-breadcrumb-item> 新增客户拜访</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <basic-container>
      <el-form :model="categoryForm" label-width="130px" label-position="right">
        <el-row>
          <el-col :span="8">
            <el-form-item label="客户">
              <select-customer-form 
                  :customerObj="{customerName: categoryForm.customerName, customerSn: categoryForm.customerSn}"
                  v-on:changeCustomer="handleSelectCustomer"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="拜访联系人" required>
              <el-select class="fill-width" v-model="categoryForm.linkmanId" style="float: left" placeholder="请选择">
                <el-option
                  v-for="item in manList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="拜访地址">
              <el-input v-model="categoryForm.visitAddress" class="form-input"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="拜访员工">
              <el-select class="fill-width" v-model="categoryForm.employeeId" style="float: left" placeholder="请选择">
                <el-option
                  v-for="item in staffList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="拜访日期">
              <el-date-picker
                class="fill-width"
                v-model="categoryForm.visitDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="进展阶段" required>
              <el-select class="fill-width" v-model="categoryForm.visitStep" style="float: left" placeholder="请选择">
                <el-option
                  v-for="item in visit_step"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="拜访内容" required>
              <el-input :rows="2" type="textarea" v-model="categoryForm.visitContent" style="float: left" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="8">
            <el-form-item label="拜访日期">
              <el-date-picker
                class="fill-width"
                v-model="categoryForm.visitDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="拜访内容" required>
              <el-input v-model="categoryForm.visitContent" style="float: left" placeholder="请选择"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="进展阶段" required>
              <el-select class="fill-width" v-model="categoryForm.visitStep" style="float: left" placeholder="请选择">
                <el-option
                  v-for="item in visit_step"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->

        <!-- <el-row>
          <el-col :span="8">
            <el-form-item label="拜访员工">
              <el-select class="fill-width" v-model="categoryForm.employeeId" style="float: left" placeholder="请选择">
                <el-option
                  v-for="item in staffList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下次拜访时间">
              <el-date-picker
                class="fill-width"
                v-model="categoryForm.nextVisitTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户状态">
              <el-select class="fill-width" v-model="categoryForm.customerStatus" style="float: left" placeholder="请选择">
                <el-option
                  v-for="item in customer_status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- <el-row>
          <el-col :span="8">
            <el-form-item label="执行状态">
              <el-select class="fill-width" v-model="categoryForm.visitStatus" style="float: left" placeholder="请选择">
                <el-option
                  v-for="item in visit_status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="拜访总结">
              <el-input v-model="categoryForm.summaryContent" class="form-input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="抵达时间">
              <el-date-picker
                class="fill-width"
                v-model="categoryForm.arrivalTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- <el-row>
          <el-col :span="8">
            <el-form-item label="离开时间">
              <el-date-picker
                class="fill-width"
                v-model="categoryForm.departureTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
            </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="抵达地址定位" required>
              <p style="text-align: left">{{arrivalPosition.formattedAddress}}</p>
              <avue-map v-model="arrivalPosition" style="width:200px" :lnglat="lnglat"></avue-map>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="离开地址定位" required>
              <p style="text-align: left">{{departurePosition.formattedAddress}}</p>
              <avue-map v-model="departurePosition" style="width:200px" :lnglat="lnglat"></avue-map>
            </el-form-item>
          </el-col>
        </el-row> -->
        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="拜访图片" required>
              <div v-if="categoryForm.photoList" class="thumbUrl" v-for="(item,index) in categoryForm.photoList">
                <img :src="item.picUrl" />
                <div class="hover_show">
                  <i class="el-icon-delete" @click="handlePictureRemove(index)"></i>
                </div>
              </div>
              <div class="select_img" @click="sel_img()" style="float: left;"><i class="el-icon-plus"></i></div>
              <div v-if="sleImg">
                <el-dialog title="选择图片" :visible.sync="sleImg" style="text-align: left;">
                  <sel-img-photogallery ref="selImg" type="10" @select="onSelectImgs"></sel-img-photogallery>
                </el-dialog>
              </div>
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-form-item>
          <div>
            <el-button type="primary" size="medium" @click="save">保存</el-button>
            <el-button type="default" size="medium" @click="close">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </basic-container>
    
  </div>
</template>

<script>
  import Request from '../request.js'
  import {getStore, setStore} from "@/util/store";
  import selImgPhotogallery from '@/components/pds/common/sel_img_photogallery'
  import { fetchList } from '@/api/crm/customer'
  import { fetchList as linkman } from '@/api/crm/customerlinkman' //联系人
  import { addCustomerVisit } from '@/api/crm/customervisit'
  import { fetchList as staffListApi } from '@/api/crm/marketemployee';
  import AvueMap from 'avue-plugin-map'
  import { mapGetters } from 'vuex'
  import Vue from 'vue'
  import { fetchDict } from '@/util/util';
  import selectCustomerForm from '@/components/crm/select_customer_form';
  export default {
    data() {
      return {
        categoryForm:{
          photoList:[],
          position:'',
          visitStep: '1',
          customerStatus: '1',
          visitStatus: '1',
          linkmanId: '',
        },
        sleImg:false,
        //初始化坐标
        lnglat: {
          P: 29.563761,
          R: 106.55046400000003,
        },
        custmoerList:[],
        manList:[],
        visit_step:[],
        customer_status:[],
        visit_status:[],
        arrivalPosition:{
          formattedAddress:'',
          longitude:'',
          latitude:'',
        },
        departurePosition:{
          formattedAddress:'',
          longitude:'',
          latitude:'',
        },
        staffList: [],
      }
    },
    components: {  
      selImgPhotogallery,
      selectCustomerForm, 
    },
    computed: {
      ...mapGetters(['tagWel', 'tagList', 'tag', 'website']),
      tagLen() {
        return this.tagList.length || 0
      }
    },
    mounted() {

    },
    created(){
      fetchDict('scm_visit_step', this.visit_step);
      fetchDict('scm_customer_status', this.customer_status);
      fetchDict('scm_visit_status', this.visit_status);
      Vue.use(AvueMap);
      this.getList();
      this.getStaffList();
    },
    methods: {
      async handleSelectCustomer(customerObj) {
        if(this.categoryForm.customerSn === customerObj.customerSn) return;
        this.categoryForm.customerSn = customerObj.customerSn;
        this.categoryForm.customerName = customerObj.customerName;
        this.categoryForm.linkmanId = '';
        let res = await linkman({current: 1, size: 100, customerSn: this.categoryForm.customerSn});
        this.manList = res.data.data.records;
      },
      async getStaffList() {
        let res = await staffListApi({current: 1, size: 1000});
        this.staffList = res.data.data.records;
      },
      //获取销售区域
      getList(page, params) {
        this.tableLoading = true
        fetchList({current: 1, size: 1000}).then(response => {
          this.custmoerList = response.data.data.records
        })
      },
      sel_img(){
        this.sleImg = true;
      },
      onSelectImgs(imgs){
        imgs.forEach((item)=>{
          this.categoryForm.photoList.push({id:item.id,picUrl:item.picUrl})
        })
        this.sleImg = false;
      },
      // 删除el-upload的图片
      handlePictureRemove(index) {
        this.categoryForm.photoList.splice(index,1)
      },
      //确定
      save(){
        let tmp = []
        this.categoryForm.photoList.forEach((item)=>{
          tmp.push(item.id);
        })
        this.categoryForm.photoList = tmp;
        let params = this.categoryForm;
        params.arrivalPosition = this.arrivalPosition.longitude + ',' + this.arrivalPosition.latitude
        params.departurePosition = this.departurePosition.longitude + ',' + this.departurePosition.latitude
        this.manList.forEach((item)=>{
          if(item.id == params.linkmanId){
            params.linkmanName = item.name;
          }
        })
        this.custmoerList.forEach((item)=>{
          if(item.customerSn == params.customerSn){
            params.customerName = item.customerName;
          }
        })
        addCustomerVisit(params).then(response => {
          if(response.data.code == 0){
            this.$message.success('创建成功')
            let _this = this;
            setTimeout(function () {
              _this.close();
            },2000)
          }else{
            this.$message.success(response.data.msg)
          }
        })
      },
      close(){
        var str_before = location.href.split('#')[1];
        let { tag, key } = this.findTag(str_before);
        this.$store.commit('DEL_TAG', tag);
        this.$router.go(-1);
      },
      findTag(value) {
        let tag, key
        this.tagList.map((item, index) => {
          if (item.value === value) {
            tag = item
            key = index
          }
        })
        return { tag: tag, key: key }
      }
    }
  }
</script>

<style scoped lang="scss">
  .crumbs{
    margin: 20px 10px;
  }
  .thumbUrl{
    width: 150px;
    height: 150px;
    position: relative;
    line-height: 146px;
    text-align: center;
    margin-right: 15px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #c0ccda;
  }
  .thumbUrl img{
    width: 100%;
    height: 100%;
  }
  .thumbUrl .hover_show{
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    display: none;
  }
  .thumbUrl:hover .hover_show{
    display: block;
  }
  .thumbUrl .hover_show i{
    color: #fff;
    margin: 0 10px;
    cursor: pointer;
  }
  .select_img{
    width: 148px;
    height: 148px;
    line-height: 146px;
    border: 1px dashed #c0ccda;
    background-color: #fbfdff;
    font-size: 28px;
    color: #8c939d;
    cursor: pointer;
    border-radius: 6px;
  }
</style>


